<template>
  <div class="notic-bar" v-if="props.text">
    <div class="notice-bar-container" :style="{ background: props.bg,color: props.color }">
      <div class="notice-bar__wrap">
        <div class="notice-bar__wrap_text">
          {{ props.text }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
	text: {
		type: String,
		default: ''
	},
	bg: {
		type: String,
		default: 'transparent'
	},
	color: {
		type: String,
		default: '#ffffff'
	},
})

</script>

<style lang="scss" scoped>
.notic-bar {
  display: flex;
  margin-bottom: 10px;
	font-size: 20px;
	width: 500px;
}
.notice-bar-container {
  display: flex;
  width: 400px;
	margin: 0 auto;
  height: 20px;
  overflow: hidden;
  padding: 10px 0;
  border-radius: 5px;
}
.notice-bar__wrap {
  display: flex;
  width: 100%;
	justify-content: center;
  // animation: move 5s linear infinite;
  line-height: 20px;

  .notice-bar__wrap_text {
    width: max-content;
    min-width: 100px;
  }
}
@keyframes move {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>